<template>
  <div class="table-page m-relative">
    <div class="m-absolute t-0 b-20 l-0 r-0 flex">
      <GiTable
        row-key="id"
        id="domainAccount1"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :pagination="pagination"
        :scroll="{ x: '100%', y: '100%', minWidth: 800 }"
        @refresh="getTableData"
      >
        <template #custom-extra>
          <a-form
            label-align="right"
            layout="inline"
            auto-label-width
            :model="listParams"
            size="small"
            class="form my-10"
          >
            <a-form-item>
              <a-space>
                <a-button type="primary" size="small" @click="onAdd(false)">
                  <template #icon>
                    <icon-plus />
                  </template>
                  <template #default>新增</template>
                </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </template>
        <template #domain="{ record }">
          <a-button status="success" type="text"> {{ record.domain }}</a-button>
        </template>
        <template #status="{ record }">
          <div class="flex flex-j-c">
            <GiDot
              :type="record.status == 1 ? 'success' : 'info'"
              :text="record.status == 1 ? '使用中' : '已停用'"
              :animation="false"
            />
          </div>
        </template>
        <template #appKey="{ record }">
          <a-button status="success" type="text"> {{ record.appKey }}</a-button>
        </template>
        <template #action="{ record }">
          <a-button type="text" size="small" @click="onAdd(record)"> 编辑 </a-button>
        </template>
      </GiTable>
      <AccountEdit ref="EditDrawerRef" @getTableData="getTableData" :cateList="cateList"></AccountEdit>
    </div>
  </div>
</template>
<script setup>
import { accountList } from '@/apis'
import { usePagination } from '@/hooks'
import AccountEdit from './AccountEdit.vue'
const tableData = ref([])
const loading = ref(false)
const EditDrawerRef = ref()
const cateList = ref([])
const listParams = reactive({
  page: 1,
  size: 15
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
const columns = ref([
  {
    title: '账号名称',
    width: 100,
    dataIndex: 'remark',
    align: 'center'
  },
  {
    title: '状态',
    width: 120,
    slotName: 'status',
    align: 'center'
  },
  {
    title: '域名',
    width: 120,
    slotName: 'domain',
    align: 'center'
  },
  {
    title: 'appKey',
    width: 180,
    slotName: 'appKey',
    align: 'center'
  },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center'
  }
])

const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await accountList({ ...listParams })
    tableData.value = res.data.data
    setTotal(res?.data?.total)
  } finally {
    loading.value = false
  }
}
getTableData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

const onResetSearch = () => {
  listParams.rname = undefined
  changeCurrent(1)
}

// 编辑
const onAdd = (item) => {
  EditDrawerRef.value?.addOrEdit(item)
}
</script>
<style lang="scss" scoped>
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table2 {
  height: 100%;
  overflow: hidden;
  // margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
